<template>
  <div class="property-panel" ref="propertyPanel">
    <!-- 任务节点允许选择人员 -->

      <el-collapse accordion style="padding-left: 10px">
        <el-collapse-item>
          <template slot="title">
            流程信息<i class="header-icon el-icon-info"></i>
          </template>
          <div>
            <el-form  :model="processForm" ref="processForm" label-width="100px" size="small">
            <el-form-item label="流程ID" prop="id">
              <el-input v-model="processForm.id" disabled></el-input>
            </el-form-item>
            <el-form-item label="流程名称"  prop="name">
              <el-input v-model="processForm.name" @change="changeFlowName"></el-input>
            </el-form-item>
            </el-form>
          </div>
        </el-collapse-item>
        <el-form  :model="form" label-width="100px" size="small">
        <el-collapse-item  v-if="isNode">
          <template slot="title">
            节点信息<i class="header-icon el-icon-info"></i>
          </template>
          <div>

              <el-form-item label="节点ID">
                <el-input v-model="form.id" disabled></el-input>
              </el-form-item>
              <el-form-item label="节点名称">
                <el-input v-model="form.name" @change="changeName"></el-input>
              </el-form-item>
            <el-form-item label="流程表单" >
              <el-input v-model="form['flowable:formkey']"  @change="changeFormKey"></el-input>
            </el-form-item>
              <!-- 候选人员 -->
              <el-form-item label="候选人员" v-if="showUser">
                <el-select
                  v-model="form['flowable:assignee']"
                  placeholder="请选择"
                  filterable
                  @change="changeAssignee"
                >
                  <el-option
                    v-for="item in users"
                    :key="item.id"
                    :label="item.realName"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
              <!-- 分支允许添加条件 -->
          </div>
        </el-collapse-item>
        </el-form>
      </el-collapse>

  </div>
</template>

<script>
import { selectUsers } from '@/api/flowable/flowable'

export default {
  name: 'PropertyPanel',
  props: {
    modeler: {
      type: Object,
      required: true
    }
  },
  computed: {
  },
  data() {
    return {
      form: {
        id: '',
        name: '',
        'flowable:formkey': '',
        'flowable:assignee': '',
        color: null
      },
      processForm: {
        name: '',
        id: ''
      },
      element: {},
      isNode: false,
      showUser: false,
      users: [],
      roles: [
        {}
      ]
    }
  },
  mounted() {
    this.handleModeler()
    this.initUser()
  },
  methods: {
    handleModeler() {
      // 监听节点选择变化
      this.modeler.on('selection.changed', e => {
        const element = e.newSelection[0]
        this.element = element
        if (!element) {
          this.processForm.id = this.modeler.getDefinitions().rootElements[0].id
          this.processForm.name = this.modeler.getDefinitions().rootElements[0].name
          this.isNode = false
          this.form = {}
          return
        }
        this.isNode = true
        this.showUser = false
        if (element.businessObject.id.indexOf('StartEvent') > -1 || element.businessObject.id.indexOf('Event') > -1) {
          this.showUser = false
        } else {
          this.showUser = true
        }
        this.form = {}
        console.info(element.businessObject)
        this.form = {
          ...element.businessObject,
          ...element.businessObject.$attrs
        }
      })

      //  监听节点属性变化
      this.modeler.on('element.changed', e => {
        const { element } = e
        if (!element) {
          return
        }
        //  新增节点需要更新回属性面板
        if (element.id === this.form.id) {
          this.form.name = element.businessObject.name
          this.form = { ...this.form }
        }
      })
    },
    changeName(name) {
      const modeling = this.modeler.get('modeling')
      modeling.updateLabel(this.element, name)
      modeling.updateProperties(this.element, { name: name })
    },
    changeFormKey(value) {
      const modeling = this.modeler.get('modeling')
      modeling.updateProperties(this.element, { 'flowable:formkey': value })
    },
    changeAssignee(value) {
      const modeling = this.modeler.get('modeling')
      modeling.updateProperties(this.element, { 'flowable:assignee': value })
    },
    changeFlowName(name) {
      this.modeler.getDefinitions().rootElements[0].set('name', name)
    },
    initUser() {
      selectUsers().then((res) => {
        this.users = res.data.records
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.property-panel {
  padding-top: 10px;
  border-left: 1px solid #cccccc;
  width: 300px;
  height: 700px;
}
</style>
